<template>
	<view class="share_box" :style="`background: url(${_i18n.locale == 'zh' ? '/static/index/shareBgc.png':'/static/index/shareBgc1.png'}) no-repeat; background-size: 100%;height: 100vh;`">
		<view class="backimg" @click="back">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<image src="/static/back.png" mode=""></image>
		</view>
		<view class="main">
			<view class="invite-btn" @tap="$fun.jump(`/pageA/shareErCode?text=${text}`)" style="position: relative;">
				<image src="@/static/button.png" mode=""></image>
				<view class="button-text">
					{{$t('home.name30')}}
				</view>
			</view>
			<view class="shopBox">
				<view class="shopList">
					<view class="top flex-between">
						<view class="top-lt">
							<image src="/static/Group1410137841@2x.png" mode=""></image>
							{{$t('home.name18')}}
						</view>
						<view class="top-rt">
						</view>
					</view>
					<view class="box flex" style="flex-wrap: wrap;">
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.income}}
							</view>
							<view class="text">
								{{$t('home.name19')}}
							</view>
						</view>
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.totalincome}}
							</view>
							<view class="text">
								{{$t('home.name20')}}
							</view>
						</view>
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.yesterNode}}
							</view>
							<view class="text">
								{{$t('home.name21')}}
							</view>
						</view>
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.totalNode}}
							</view>
							<view class="text">
								{{$t('home.name22')}}
							</view>
						</view>
					</view>
					<view class="top flex-between">
						<view class="top-lt">
							<image src="/static/Group1410137841@2x.png" mode=""></image>
							{{$t('home.name23')}}
						</view>
					</view>
					<view class="box flex">
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.invite}}
							</view>
							<view class="text">
								{{$t('home.name24')}}
							</view>
						</view>
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.invites}}
							</view>
							<view class="text">
								{{$t('home.name25')}}
							</view>
						</view>
						<view class="" style="width: 50%;text-align: center;">
							<view class="num">
								{{shareInfo.dayinvite}}
							</view>
							<view class="text">
								{{$t('home.name26')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uqrcode from "@/pageA/components/Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		components: {
			uqrcode
		},
		data() {
			return {
				shareLink: '',
				shareInfo: {},
				tabList: [{
						name: '累计'
					},
					{
						name: '今日'
					},
					{
						name: '昨日'
					},
				],
				tabIndex:0,
				text:"",
				statusBarHeight:0
			};
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '储算云',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '储算云',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			uni.setNavigationBarTitle({
				title:this.$t('home.name27')
			})
			this.$fun.ajax.post('user/getH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.text = res.data.url
				}
			})
			this.$fun.ajax.post('user/inviteInfo', {}).then(res => {
				if (res.code == 1) {
					this.shareInfo = res.data
				}
			})
			
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			changeTab(index) {
				this.tabIndex = index
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		// height: 100%;
		background-color: #C5D8F5;
	}
	.backimg {
		position: fixed;
		top: 10rpx;
		left: 30rpx;
	
		image {
			width: 20rpx;
			height: 34rpx;
			// opacity: 0.5;
		}
	}
	.share_box {
		height: 100%;
		position: relative;
		top: -40rpx;
		.bgc {
			height: 100%;
		}

		.main {
			// margin: 20upx 75upx;
			position: absolute;
			top: 42%;
			left: 0;
			right: 0;
			// height:65vh;

			.header {
				.top {
					background-color: #00A3FF;
					height: 70rpx;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					padding: 0 30rpx;
				}

				.top-lt {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					display: flex;
					align-items: center;
					image {
						width: 24rpx;
						height: 18rpx;
						margin-right: 10rpx;
					}
				}

				.top-rt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.box {
					background-color: #E0EBFE;
					border-radius: 0rpx 0rpx 20rpx 20rpx;

					.swiper {
						height: 228rpx;

						.swiper-item {
							width: 230rpx;
							height: 164rpx;
							background-color: #E0EBFE;
							border: 1rpx solid #00A3FF;
							margin: 28rpx 20rpx;
							padding: 5rpx;

							.lt {
								width: 80rpx;
								height: 80rpx;
								background-color: red;
							}

							.rt {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 34rpx;
								text-align: right;

								& view:nth-child(3) {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
									line-height: 53rpx;
									text-align: right;

									&::before {
										content: '';
										display: inline-block;
										width: 15rpx;
										height: 15rpx;
										background-color: #00A3FF;
										border-radius: 30%;
										margin-right: 15rpx;
										box-shadow: 1rpx 1rpx 10rpx #00A3FF;
									}
								}
							}
						}
					}
				}

			}

			.invite-btn {
				width: 360rpx;
				height: 128rpx;
				margin: 70rpx auto 0rpx;
				.button-text{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					color: #fff;
					font-weight: 700;
					font-size: 26rpx;
				}
			}

			.shopBox {
				// background-color: rgba(41, 54, 77, 0.8);

				.tabLists {
					background: #FFFFFF;
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: space-around;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.tabItem {
						height: 100%;
						color: #888888;
						font-size: 28rpx;
						line-height: 80rpx;
						border-bottom: 4rpx solid transparent;
					}

					.active {
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;
						border-bottom: 4rpx solid #00A3FF;
					}
				}

				.shopList {
					.top {
						background-color: #00A3FF;
						height: 70rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						padding: 0 30rpx;
						margin-top: 20rpx;
					}
					
					.top-lt {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 33rpx;
						display: flex;
						align-items: center;
						image {
							width: 24rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
					}
					
					.top-rt {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 28rpx;
						.detail{
							width: 120rpx;
							height: 38rpx;
							border: 1rpx solid #fff;
							border-radius: 30rpx;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
						}
					}
					.box{
						height: 246rpx;
						background-color: #E0EBFE;
						border-radius: 0rpx 0rpx 20rpx 20rpx;
						.num{
							font-family: DIN, DIN;
							font-weight: bold;
							font-size: 32rpx;
							color: #232323;
						}
						.text{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #232323;
						}
					}
				}	
			}



		}
	}
</style>